<template>
  <div>
    <el-container>
      <el-header style="height: auto;padding: 0px 0px;">
        <van-nav-bar
          title="完工查询列表"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </el-header>
      <el-main style="padding: 0px 0px;">
        <el-row style="padding: 5px 0px 5px 0px;">
          <el-col :span="8">
            <el-input v-model="gdh" @keyup.enter.native="codeWhow">
              <template slot="prepend">
                <span class="searchFont">工单号</span>
              </template>
            </el-input>
            <!-- <div class="font">单号：</div>
            <textarea
              type="text"
              ref="gcdInputVal"
              class="tatile_style"
              
              v-model="gdh"
            ></textarea> -->
          </el-col>
          <el-col :span="8">
            <van-button
              class="tbutt"
              size="large"
              color="steelblue"
              @click="getData"
              >查询</van-button
            >
          </el-col>
          <!-- <el-col :span="8">
            <van-button class="tbutt" size="large" color="steelblue"
              @click="printIssue">打印</van-button
            >
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-table
              ref="multipleTable"
              :data="tableData"
              height="calc(100vh - 110px)"
              tooltip-effect="dark"
              @selection-change="handleSelectionChange"
              :cell-style="handleCellStyle"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column
                prop="status"
                label="工单状态"
                show-overflow-tooltip
                width="90"
              >
                <template #default="scope">
                  <span v-if="scope.row.status == 1">计划</span>
                  <span v-else-if="scope.row.status == 2">执行</span>
                  <span v-else-if="scope.row.status == 3">停止</span>
                  <span v-else-if="scope.row.status == 4">完成</span>
                  <span v-else-if="scope.row.status == 5">接收</span>
                </template>
              </el-table-column>
              <el-table-column prop="no" label="工单号 " width="120" />
              <el-table-column prop="date" label="日期 " width="200">
                <template #default="scope">
                  <span>{{ formatDate(scope.row.date) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="inventoryID" label="物料编码" width="120">
              </el-table-column>
              <el-table-column
                prop="inventoryDesc"
                label="物料名称"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="deskStock"
                label="车间"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="projectBatch"
                label="批号"
                show-overflow-tooltip
              >
              </el-table-column>

              <el-table-column
                prop="eviType"
                label="单据类型"
                show-overflow-tooltip
              >
                <template #default="scope">
                  <span v-if="scope.row.eviType == 1">工单</span>
                  <span v-else-if="scope.row.eviType == 2">车间配料</span>
                  <span v-else>仓库配料</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="300">
                <template #default="scope">
                  <el-button
                    size="small"
                    type="warning"
                    @click="printIssue(scope.$index, scope.row)"
                    >打印</el-button
                  >
                  <!-- <el-button
                    size="small"
                    type="primary"
                    @click="handleView(scope.$index, scope.row)"
                    >明细</el-button
                  > -->
                  <el-button
                    size="small"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
              <!-- <el-table-column
        prop="address"
        label="车间配料计划"
        show-overflow-tooltip
      >
      </el-table-column> -->
            </el-table>
          </el-col>
        </el-row>
      </el-main>
    </el-container>

    <!-- <div class="orderTwo">
      <div class="feeding">
        
      </div>
      <div class="butt">
        
        
      </div>
    </div> -->
  </div>
</template>
<script>
import { ref, onMounted } from "vue";
import router from "@/router";
import { Dialog } from "vant";
import dayjs from "dayjs";

export default {
  name: "orderList",
  setup() {
    const gdh = ref("");
    const invid = ref("");
    const invname = ref("");
    const clqty = ref("");
    const tableData = ref([]);
    const test = e => {
      console.log(e);
    };
    const onClickLeft = () => {
      router.push("/");
    };
    const det = () => {
      router.push({
        name: "orderDetail",
        params: {}
      });
    };
    const getData = () => {
      DotNet.invokeMethodAsync(
        "Rmac",
        "GetIssueList",
        JSON.stringify({ status: 4, no: gdh.value })
      ).then(res => {
        tableData.value = res;
        console.log(res);
      });
    };
    const codeWhow = e => {
      //if (e.keyCode == 13) {
      console.log(gdh.value);
      DotNet.invokeMethodAsync("Rmac", "ScanQrCodeSaveIssue", gdh.value)
        .then(res => {
          console.log(res);
          gdh.value = "";
          getData();
        })
        .catch(error => {
          gdh.value = "";
          Dialog.alert({
            message: error
          });
        });
      //}
    };
    const handleView = (rowIndex, row) => {
      router.push({
        name: "orderDetail",
        params: { data: row.fG_InvChild }
      });
    };
    const handleDelete = (rowIndex, row) => {
      Dialog.confirm({
        title: "是否确认删除？",
        message: ""
      }).then(() => {
        DotNet.invokeMethodAsync(
          "Rmac",
          "DeleteIssue",
          JSON.stringify({
            id: row.id
          })
        ).then(res => {
          getData();
          console.log(res);
        });
      });
    };
    onMounted(() => {
      setTimeout(() => {
        getData();
      }, 300);
    });
    const handleCellStyle = ({ row, column, rowIndex, columnIndex }) => {
      if (column.property == "status") {
        console.log(column, columnIndex);
        console.log(row);
        var colorString = "";
        switch (parseInt(row.status)) {
          case 2:
            colorString = "#FFCC66";
            break;
          case 3:
            colorString = "crimson";
            break;
          case 4:
            colorString = "#66CC99";
            break;
          default:
            colorString = "white";
            break;
        }
        return `color:black;background:${colorString}`;
      }
    };
    const printIssue = (rowIndex, row) => {
      DotNet.invokeMethodAsync(
        "Rmac",
        "PrintIssueFinishQr",
        JSON.stringify({ id: row.id })
      )
        .then(res => {
          console.log(res);
          gdh.value = "";
          getData();
        })
        .catch(error => {
          gdh.value = "";
          Dialog.alert({
            message: error
          });
        });
    };
    const formatDate = value => {
      const date = dayjs(value).format("YYYY-MM-DD HH:mm:ss");
      console.log(date);
      return date;
    };
    return {
      gdh,
      invid,
      invname,
      clqty,
      codeWhow,
      onClickLeft,
      tableData,
      det,
      getData,
      handleView,
      handleDelete,
      test,
      handleCellStyle,
      formatDate,
      printIssue
    };
  }
};
</script>
<style scoped>
.searchFont {
  font-size: 15px;
  /* font-family: "Lucida Calligraphy", cursive, serif, sans-serif; */
  font-weight: bold;
  color: black;
}
.tbutt {
  margin-right: 5px;
  border-radius: 15px;
  font-size: 20px;
  width: 80%;
  box-shadow: 0px 5px 19px 0px darkblue;
}
/* table {
  width: 100%;
  /*height: 400px;
} 
.orderOne {
  display: flex;
  justify-content: space-between;
  padding-right: 20px;
  height: 50px;
}

.orderOne p {
  color: white;
  font-size: 20px;
}
.feeding .tatile_style {
  background-color: #eeeeee;
  resize: none;
  width: 250px;
  height: 30px;
  margin-top: 15px;
  margin: 10px;
  line-height: 30px;
} 

/* .example-body {
  display: flex;
  justify-content: space-around;
  bottom: 0;
  clear: both;
  margin-top: 20px;
  width: 100%;
  vertical-align: bottom;
  position: absolute;
  bottom: 50px;
} */

/* .orderTwo {
  display: flex;
  justify-content: space-evenly;
  margin-top: 20px;
  height: 70px;
}

.orderTwo .feeding {
  width: 40%;
  display: flex;
}

.orderTwo .butt {
  display: flex;
  justify-content: space-around;
  width: 50%;
  font-size: 20px;
}

.orderTwo .butt .buttone {
  border-radius: 15px;
  width: 15%;
  box-shadow: 0px 5px 19px 0px darkblue;
}
.feeding .font {
  font-size: 20px;
  font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
  font-weight: bold;
  color: white;
  height: 70px;
  padding-top: 15px;
  width: 20%;
} */
</style>
